<template>
  <div>
    <div>
      <el-form
        :model="queryForm"
        ref="queryForm"
        :inline="true"
        label-width="85px"
        class="globalSerchFormStyle"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="优惠券标识" prop="couponRemark">
              <el-input
                v-model="queryForm.couponRemark"
                placeholder="请输入标识"
                clearable
                size="small"
                style="width: 185px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="优惠券类型" prop="couponType">
              <el-select
                v-model="queryForm.couponType"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 185px"
              >
                <el-option label="现金卷" value="1"></el-option>
                <el-option label="折扣卷" value="2"></el-option>
                <el-option label="兑换卷" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="优惠券名称" prop="couponName">
              <el-input
                v-model="queryForm.couponName"
                placeholder="请输入名称"
                clearable
                size="small"
                style="width: 185px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生效状态" prop="status">
              <el-select
                v-model="queryForm.status"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 185px"
              >
                <el-option label="开启" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-show="collapse">
          <el-col :span="6">
            <el-form-item label="创建时间" prop="getCreateTime">
              <el-date-picker
                style="width: 185px"
                v-model="dateRangeCreatedDate"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row class="global_el_rowStyle" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            plain
            >重置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            size="mini"
            id="closeSearchBtn"
            @click="
              (closeSearch) => {
                collapse = !collapse;
              }
            "
          >
            {{ collapse ? "收起" : "展开更多" }}
            <i
              :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
            ></i>
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="couponList" stripe>
        <!-- <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />
        <af-table-column label="状态" align="left">
          <template slot-scope="scope">
                  {{ scope.row.status == "1" ? "启用状态" : "" }}
                  {{ scope.row.status == "0" ? "停用状态" : "" }}
                </template>
        </af-table-column>
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column
          label="优惠券说明"
          align="left"
          prop="couponDetails"
        />
        <af-table-column label="使用门槛" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? scope.row.couponThresholdAmt == 0
                  ? "无门槛"
                  : "满" + scope.row.couponThresholdAmt + "元可用"
                : ""
            }}
            {{ scope.row.couponType == 3 ? "------------" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="适用" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? "适用油品：" + (scope.row.oilNameList || []).toString()
                : ""
            }}
            {{ scope.row.couponType == 3 ? "核销机构："+ (scope.row.verificationNameList || []).toString() : ""   }}
          </template>
        </af-table-column>
         <af-table-column label="油站ID" align="left" prop="id" />
        <af-table-column label="使用状态" align="left">
          <template slot-scope="scope">
            {{
              "共生成了" +
              scope.row.couponNum +
              "张，已领取" +
              scope.row.couponCumulativeNum +
              "张，已使用" +
              scope.row.couponUseNum +
              "张"
            }}
          </template>
        </af-table-column>

        <af-table-column label="有效期内使用限制" align="left">
          <template slot-scope="scope">
            {{
              (scope.row.effectiveTimeType == 1
                ? scope.row.effectiveTime[0] + "到" + scope.row.effectiveTime[1]
                : "用户领取" + scope.row.effectiveDayNum + "天内有效") +
              "内有效"
            }}
            {{ translateTime(scope.row) }}
          </template>
        </af-table-column>

        <af-table-column label="领取限制" align="left">
          <template slot-scope="scope">
            {{
              "单用户最多持有" +
              scope.row.couponHoldNum +
              "张，累计可拥有" +
              scope.row.couponReceiveNum +
              "张"
            }}
          </template>
        </af-table-column>

        <af-table-column label="优惠叠加" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? ["不", ""][scope.row.isCardFlag] +
                  "可用电子卡，" +
                  ["不", ""][scope.row.isGradeFlag] +
                  "可用等级优惠，" +
                  ["不", ""][scope.row.isMarketFlag] +
                  "可用优惠方案"
                : ""
            }}
            {{ scope.row.couponType == 3 ? "------------" : "" }}
          </template>
        </af-table-column> -->
        <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />

        <af-table-column label="优惠说明" align="left" prop="couponDetails" />
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>

        <af-table-column label="使用状态" align="left">
          <template slot-scope="scope">
            {{
              "共生成了" +
              scope.row.couponNum +
              "张，已领取" +
              scope.row.getCouponNum +
              "张，已使用" +
              scope.row.useCouponNum +
              "张"
            }}
          </template>
        </af-table-column>
        <af-table-column label="核销机构" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1 || scope.row.couponType == 2
                ? "------------"
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? !scope.row.verificationList ||
                  scope.row.verificationList.length == 0
                  ? "仅自家站点"
                  : (scope.row.verificationNameList || []).toString()
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column label="有效期内使用限制" align="left">
          <template slot-scope="scope">
            {{
              (scope.row.effectiveTimeType == 1
                ? scope.row.effectiveTime[0] + "到" + scope.row.effectiveTime[1]
                : "用户领取" + scope.row.effectiveDayNum + "天内有效") +
              "内有效"
            }}
          </template>
        </af-table-column>
        <af-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="120px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-search"
              @click="handlequeryCouponUserList(scope.row.id)"
              v-if="scope.row.editFlag"
              >查看优惠券</el-button
            >
          </template>
        </af-table-column>
      </el-table>
      <pagination
        :hidden="total > 0 ? false : true"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getCoupon"
        :autoScroll="true"
      />
    </div>

    <!-- 添加或修改油站设备管理对话框 -->

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      status-icon
    >
      <el-table :data="couponUserList">
        <af-table-column v-if="false" label="优惠券id" align="left" prop="id" />
        <af-table-column
          label="用户ID"
          align="left"
          prop="unionId"
          v-if="false"
        />
        <af-table-column
          label="油站ID"
          align="left"
          prop="stationId"
          v-if="false"
        />
        <af-table-column
          label="发放方式ID"
          align="left"
          prop="issueId"
          v-if="false"
        />
        <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
        <af-table-column label="活动名称" align="left" prop="issueName" />

        <af-table-column
          label="优惠券ID"
          align="left"
          prop="couponId"
          v-if="false"
        />
        <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column label="是否使用" align="left">
          <template slot-scope="scope">
            {{ scope.row.couponIsUsed == "0" ? "未使用" : "" }}
            {{ scope.row.couponIsUsed == "1" ? "已使用" : "" }}
            {{ scope.row.couponIsUsed == "2" ? "已核销" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="是否有效" align="left">
          <template slot-scope="scope">
            {{ scope.row.couponIsEffective == "0" ? "无效" : "" }}
            {{ scope.row.couponIsEffective == "1" ? "有效" : "" }}
          </template>
        </af-table-column>
        <af-table-column
          label="用户保存id"
          align="left"
          prop="userId"
          v-if="false"
        />
        <af-table-column label="手机号" align="left" prop="mobilePhone" />
        <af-table-column label="用户名" align="left" prop="blogNickName" />
        <af-table-column
          label="核销员账号"
          align="left"
          prop="verificationUserAccount"
        />
        <af-table-column label="获取时间" align="left" prop="couponGetTime" />
        <af-table-column
          label="核销时间"
          align="left"
          prop="verificationTime"
        />
        <!-- <af-table-column label="优惠券获取时间" align="left" prop="getCouponTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.getCouponTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column>
      <af-table-column label="优惠券截止时间" align="left" prop="couponEffectiveTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.couponEffectiveTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column> -->
      </el-table>
      <pagination
        v-show="userTotal > 0"
        :total="userTotal"
        :page.sync="queryCouponUserFrom.pageNum"
        :limit.sync="queryCouponUserFrom.pageSize"
        @pagination="queryCouponUserListByPage"
      />
    </el-dialog>
  </div>
</template>

<script>
import { timeComparison } from "@/utils/timeConversion";
import {
  addInfo,
  listInfo,
  updateInfo,
  queryCouponUserList,
} from "@/api/coupon";

export default {
  name: "",
  data() {
    return {
      //创建优惠券的时间
      dateRangeCreatedDate: [],
      couponEnabledFlag: "1",
      pageStatus: 4,
      // 油站设备管理表格数据
      createForm: {
        couponRemark: "",
        couponName: "",
        couponDetails: "",
        couponThresholdAmt: 0,
        couponType: "1",
        couponAmt: "",
        oilNameList: [],
        effectiveTimeType: "", //有效时间类型： 1，固定时间；2，领取后x天内有效
        effectiveTime: [],
        effectiveDayNum: 30,
        couponHoldNum: 1,
        couponReceiveNum: 100,
        couponNum: 100,
        status: "1",
        verificationList: [],
        isCardFlag: "1",
        isGradeFlag: "1",
        isMarketFlag: "1",
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
      },
      couponList: [],
      day: [],
      cycle: [],

      deviceTypeOptions: [],
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      // 优惠券总条数
      userTotal: 100,
      // 优惠券的信息
      couponUserList: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
        couponName: null,
        couponRemark: null,
        couponType: null,
        levelId: this.levelId,
        couponRemark: null,
        status: null,
        getCreateTime: null,
      },
      queryCouponUserFrom: {
        levelId: this.levelId,
        issueId: null,
        couponId: null,
        stationId: null,
        pageNum: 1,
        pageSize: 10,
      },
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "7号",
          "8号",
          "9号",
          "10号",
          "11号",
          "12号",
          "13号",
          "14号",
          "15号",
          "16号",
          "17号",
          "18号",
          "19号",
          "20号",
          "21号",
          "22号",
          "23号",
          "24号",
          "25号",
          "26号",
          "27号",
          "28号",
          "29号",
          "30号",
          "31号",
        ],
      ],
      collapse: false,
    };
  },
  created() {
    this.init();
  },
  computed: {},
  methods: {
    translateTime(row) {
      let timeString = "";
      const availableControleType = row.availableControl;
      if (availableControleType == 0) {
        return "，有效期内一直都可以领取";
      }
      timeString = "，且用户只能在";
      if (availableControleType == 1) {
        timeString += "每周的";
      }
      if (availableControleType == 2) {
        timeString += "每月的";
      }
      if (availableControleType == 3) {
        timeString += "指定的日期 ";
      }
      if (availableControleType == 1 || availableControleType == 2) {
        row.cycleDaysList.forEach((ele) => {
          timeString += this.timeSelect[availableControleType][ele] + "、";
        });
      } else if (availableControleType == 3) {
        timeString += row.appointedDaysList.toString();
      }

      timeString = timeString.replace(/(、)$/g, "") + "可以使用劵";
      return timeString;
    },
    getCoupon() {
      listInfo(this.queryForm)
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.couponList = [];
            } else {
              this.total = res.total;
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    /** 查看优惠券信息 */
    handlequeryCouponUserList(row) {
      this.queryCouponUserFrom.couponId = row;

      queryCouponUserList(this.queryCouponUserFrom).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
    },
    /** 查看优惠券信息 */
    queryCouponUserListByPage() {
      queryCouponUserList(this.queryCouponUserFrom).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
    },
    init() {
      this.getCoupon();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getList();
    },
    /** 查询优惠券模板信息*/
    getList() {
      const queryForm = this.addDateRange(
        this.queryForm,
        this.dateRangeCreatedDate
      );

      // const time = timeComparison(
      //   "earching",
      //   queryForm.beginTime,
      //   queryForm.endTime
      // );
      // if (!time) return;

      listInfo(queryForm)
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.couponList = [];
            } else {
              this.total = res.total;
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreatedDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss"></style>
